Οι απαντήσεις αυτής της ερώτησης είναι μια κοινοτική προσπάθεια. Επεξεργαστείτε τις υπάρχουσες απαντήσεις για να βελτιώσετε αυτήν την ανάρτηση. Προς το παρόν δεν δέχεται νέες απαντήσεις ή αλληλεπιδράσεις. Πώς μπορώ να ανακατευθύνω το χρήστη από τη μία σελίδα στην άλλη χρησιμοποιώντας jQuery ή καθαρή JavaScript;
2020-12-07 22:00:27
1
2
Επόμενο
Δεν γίνεται απλώς ανακατεύθυνση χρησιμοποιώντας το jQuery
Το jQuery δεν είναι απαραίτητο και το window.location.replace (...) προσομοιώνει καλύτερα μια ανακατεύθυνση HTTP.
Το window.location.replace (...) είναι καλύτερο από τη χρήση του window.location.href, επειδή η αντικατάσταση () δεν διατηρεί την αρχική σελίδα στο ιστορικό περιόδου λειτουργίας, που σημαίνει ότι ο χρήστης δεν θα κολλήσει σε ένα ατελείωτο φιάσκο κουμπιών.
Εάν θέλετε να προσομοιώσετε κάποιον που κάνει κλικ σε έναν σύνδεσμο, χρησιμοποιήστε το
location.href
Εάν θέλετε να προσομοιώσετε μια ανακατεύθυνση HTTP, χρησιμοποιήστε το location.replace
Για παράδειγμα:
// παρόμοια συμπεριφορά με μια ανακατεύθυνση HTTP
window.location.replace ("http://stackoverflow.com");
// παρόμοια συμπεριφορά με το κλικ σε έναν σύνδεσμο
window.location.href = "http://stackoverflow.com";
|
ΠΡΟΕΙΔΟΠΟΙΗΣΗ: Αυτή η απάντηση δόθηκε απλώς ως πιθανή λύση. Προφανώς δεν είναι η καλύτερη λύση, καθώς απαιτεί jQuery. Αντ 'αυτού, προτιμήστε την καθαρή λύση JavaScript.
$ (τοποθεσία) .attr ('href', 'http://stackoverflow.com')
|
Τυπικός τρόπος "βανίλια" JavaScript για ανακατεύθυνση μιας σελίδας
window.location.href = 'newPage.html';
Ή πιο απλά: (αφού το παράθυρο είναι παγκόσμιο)
location.href = 'newPage.html';
Εάν βρίσκεστε εδώ επειδή χάνετε HTTP_REFERER κατά την ανακατεύθυνση, συνεχίστε να διαβάζετε:
(Διαφορετικά αγνοήστε αυτό το τελευταίο μέρος)
Η ακόλουθη ενότητα είναι για όσους χρησιμοποιούν HTTP_REFERER ως ένα από τα πολλά μέτρα ασφαλείας (αν και δεν είναι ένα εξαιρετικό προστατευτικό μέτρο). Εάν χρησιμοποιείτε τον Internet Explorer 8 ή νεότερη έκδοση, αυτές οι μεταβλητές χάνονται όταν χρησιμοποιείτε οποιαδήποτε μορφή ανακατεύθυνσης σελίδας JavaScript (location.href κ.λπ.)
Παρακάτω θα εφαρμόσουμε μια εναλλακτική λύση για IE8 και χαμηλότερη, ώστε να μην χάσουμε το HTTP_REFERER Διαφορετικά, μπορείτε σχεδόν πάντα να χρησιμοποιήσετε απλά το window.location.href.
Η δοκιμή κατά HTTP_REFERER (επικόλληση διεύθυνσης URL, περίοδο σύνδεσης κ.λπ.) μπορεί να σας βοηθήσει να διαπιστώσετε εάν ένα αίτημα είναι νόμιμο.
(Σημείωση: υπάρχουν επίσης τρόποι αντιμετώπισης / πλαστογράφησης αυτών των παραπομπών, όπως σημειώνεται από τον σύνδεσμο του droop στα σχόλια)
Απλή λύση δοκιμής μεταξύ προγραμμάτων περιήγησης (εναλλακτική λύση στο window.location.href για τον Internet Explorer 9+ και όλα τα άλλα προγράμματα περιήγησης)
Χρήση: redirect ('anotherpage.aspx');
ανακατεύθυνση λειτουργίας (url) {
var ua = navigator.userAgent.toLowerCase (),
isIE = ua.indexOf ('msie')! == -1,
έκδοση = parseInt (ua.substr (4, 2), 10);
// Internet Explorer 8 και νεότερη έκδοση
εάν (isIE && έκδοση <9) {
var link = document.createElement ('a');
link.href = url;
document.body.appendChild (σύνδεσμος);
link.click ();
}
// Όλα τα άλλα προγράμματα περιήγησης μπορούν να χρησιμοποιούν το τυπικό window.location.href (δεν χάνουν το HTTP_REFERER όπως ο Internet Explorer 8 και οι χαμηλότεροι)
αλλιώς {
window.location.href = url;
}
}
|
Υπάρχουν πολλοί τρόποι για να το κάνετε αυτό.
// window.location
window.location.replace ('http://www.example.com')
window.location.assign ('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/ διαδρομή'
// window.history
window.history.back ()
window.history.go (-1)
// window.navigate; ΜΟΝΟ για παλιές εκδόσεις του Internet Explorer
window.navigate ('top.jsp')
// Πιθανώς όχι bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';
// jQuery
$ (τοποθεσία) .attr ('href', 'http: //www.example.com')
$ (παράθυρο) .attr ('location', 'http: //www.example.com')
$ (τοποθεσία) .prop ('href', 'http://www.example.com')
|
Αυτό λειτουργεί για κάθε πρόγραμμα περιήγησης:
window.location.href = 'your_url';
|
Θα βοηθούσε αν ήσασταν λίγο πιο περιγραφική σε αυτό που προσπαθείτε να κάνετε. Εάν προσπαθείτε να δημιουργήσετε σελιδοποιημένα δεδομένα, υπάρχουν ορισμένες επιλογές για το πώς το κάνετε αυτό. Μπορείτε να δημιουργήσετε ξεχωριστούς συνδέσμους για κάθε σελίδα στην οποία θέλετε να έχετε απευθείας πρόσβαση.
1
2
3
...
Σημειώστε ότι η τρέχουσα σελίδα στο παράδειγμα αντιμετωπίζεται διαφορετικά στον κώδικα και με CSS.
Εάν θέλετε να αλλάξετε τα σελιδοποιημένα δεδομένα μέσω AJAX, εδώ θα έρθει το jQuery. Αυτό που θα κάνατε είναι να προσθέσετε ένα χειριστή κλικ σε κάθε μια από τις ετικέτες αγκύρωσης που αντιστοιχούν σε διαφορετική σελίδα. Αυτός ο χειριστής κλικ θα επικαλούσε κάποιον κώδικα jQuery που πηγαίνει και ανακτά την επόμενη σελίδα μέσω AJAX και ενημερώνει τον πίνακα με τα νέα δεδομένα. Το παρακάτω παράδειγμα προϋποθέτει ότι έχετε μια υπηρεσία ιστού που επιστρέφει τα νέα δεδομένα σελίδας.
$ (έγγραφο). ήδη (συνάρτηση () {
$ ('a.pager-link'). κάντε κλικ στο (function () {
var σελίδα = $ (this) .attr ('href'). split (/ \? /) [1];
$ .ajax ({
πληκτρολογήστε: "POST",
url: '/ path-to-service',
δεδομένα: σελίδα,
επιτυχία: λειτουργία (περιεχόμενο) {
$ ('# myTable'). html (περιεχόμενο); // αντικαταστήστε
}
});
επιστροφή ψευδής? // για διακοπή συνδέσμου
});
});
|
Πιστεύω επίσης ότι το location.replace (URL) είναι ο καλύτερος τρόπος, αλλά αν θέλετε να ειδοποιήσετε τις μηχανές αναζήτησης για την ανακατεύθυνση (δεν αναλύουν κώδικα JavaScript για να δουν την ανακατεύθυνση) θα πρέπει να προσθέσετε το rel = "canonical" meta ετικέτα στον ιστότοπό σας.
Η προσθήκη μιας ενότητας noscript με μια μετα-ετικέτα ανανέωσης HTML σε αυτήν, είναι επίσης μια καλή λύση. Σας προτείνω να χρησιμοποιήσετε αυτό το εργαλείο ανακατεύθυνσης JavaScriptδημιουργήστε ανακατευθύνσεις. Διαθέτει επίσης υποστήριξη του Internet Explorer για να περάσει το HTTP referer.
Το δείγμα κώδικα χωρίς καθυστέρηση μοιάζει με αυτό:
|
Αλλά αν κάποιος θέλει να ανακατευθύνει στην αρχική σελίδα, τότε μπορεί να χρησιμοποιήσει το ακόλουθο απόσπασμα.
window.location = window.location.host
Θα ήταν χρήσιμο εάν έχετε τρία διαφορετικά περιβάλλοντα όπως ανάπτυξη, στάση και παραγωγή.
Μπορείτε να εξερευνήσετε αυτό το παράθυρο ή το αντικείμενο window.location απλά τοποθετώντας αυτές τις λέξεις στην Κονσόλα Chrome ή στην Κονσόλα του Firebug
|
Το JavaScript σας παρέχει πολλές μεθόδους για να ανακτήσετε και να αλλάξετε την τρέχουσα διεύθυνση URL που εμφανίζεται στη γραμμή διευθύνσεων του προγράμματος περιήγησης. Όλες αυτές οι μέθοδοι χρησιμοποιούν το αντικείμενο τοποθεσίας, το οποίο είναι μια ιδιότητα του αντικειμένου παραθύρου. Μπορείτε να δημιουργήσετε ένα νέο αντικείμενο τοποθεσίας που έχει την τρέχουσα διεύθυνση URL ως εξής ..
var currentLocation = window.location;
Βασική δομή ενός URL
//:/
Πρωτόκολλο - Καθορίζει το όνομα πρωτοκόλλου που θα χρησιμοποιηθεί για πρόσβαση στον πόρο στο Διαδίκτυο. (HTTP (χωρίς SSL) ή HTTPS (με SSL))
hostname - Το όνομα κεντρικού υπολογιστή καθορίζει τον κεντρικό υπολογιστή που κατέχει τον πόρο. Για παράδειγμα, www.stackoverflow.com. Ένας διακομιστής παρέχει υπηρεσίες χρησιμοποιώντας το όνομα του κεντρικού υπολογιστή.
θύρα - Ένας αριθμός θύρας που χρησιμοποιείται για την αναγνώριση μιας συγκεκριμένης διαδικασίας στην οποία ένα Διαδίκτυο ή άλλο μήνυμα δικτύου πρέπει να προωθείται όταν φτάνει σε έναν διακομιστή.
pathname - Η διαδρομή παρέχει πληροφορίες σχετικά με τον συγκεκριμένο πόρο εντός του κεντρικού υπολογιστή στον οποίο θέλει να έχει πρόσβαση ο πελάτης Web. Για παράδειγμα, stackoverflow.com/index.html.
query - Μια συμβολοσειρά ερωτήσεων ακολουθεί το στοιχείο διαδρομής και παρέχει μια σειρά πληροφοριών που ο πόρος μπορεί να χρησιμοποιήσει για κάποιο σκοπό (για παράδειγμα, ως παράμετροι για μια αναζήτηση ή ως δεδομένα προς επεξεργασία)
hash - Το τμήμα αγκύρωσης ενός URL, περιλαμβάνει το σύμβολο hash (#).
Με αυτές τις ιδιότητες αντικειμένου τοποθεσίας μπορείτε να έχετε πρόσβαση σε όλα αυτά τα στοιχεία διεύθυνσης URL
hash - Ορίζει ή επιστρέφει το τμήμα αγκύρωσης μιας διεύθυνσης URL.
οικοδεσπότης-Σετ
ή επιστρέφει το όνομα κεντρικού υπολογιστή και τη θύρα ενός URL.
όνομα κεντρικού υπολογιστή - Σετ ή
επιστρέφει το όνομα κεντρικού υπολογιστή μιας διεύθυνσης URL.
href - Ορίζει ή επιστρέφει ολόκληρο
Διεύθυνση URL.
pathname - Ορίζει ή επιστρέφει το όνομα διαδρομής μιας διεύθυνσης URL.
port - Ορίζει ή επιστρέφει τον αριθμό θύρας που χρησιμοποιεί ο διακομιστής για μια διεύθυνση URL.
πρωτόκολλο - Ορίζει ή επιστρέφει το πρωτόκολλο μιας διεύθυνσης URL.
αναζήτηση-Σετ
ή επιστρέφει το τμήμα ερωτήματος μιας διεύθυνσης URL
Τώρα Εάν θέλετε να αλλάξετε μια σελίδα ή να ανακατευθύνετε τον χρήστη σε κάποια άλλη σελίδα, μπορείτε να χρησιμοποιήσετε την ιδιότητα href του αντικειμένου Τοποθεσίας όπως αυτό
Μπορείτε να χρησιμοποιήσετε την ιδιότητα href του αντικειμένου τοποθεσίας.
window.location.href = "http://www.stackoverflow.com";
Το Object Object έχει επίσης αυτές τις τρεις μεθόδους
assign () - Φορτώνει ένα νέο έγγραφο.
reload () - Επαναφόρτωση του τρέχοντος εγγράφου.
Αντικατάσταση () - Αντικαθιστά το τρέχον έγγραφο με ένα νέο
Μπορείτε να χρησιμοποιήσετε την αντιστοίχιση () και να αντικαταστήσετε μεθόδους επίσης για ανακατεύθυνση σε άλλες σελίδες όπως αυτές
location.assign ("http://www.stackoverflow.com");
location.replace ("http://www.stackoverflow.com");
Πώς διαφέρει η αντιστοίχιση () και η αντικατάσταση () - Η διαφορά μεταξύ της μεθόδου αντικατάστασης () και της μεθόδου εκχώρησης () (), είναι ότι η αντικατάσταση () αφαιρεί τη διεύθυνση URL του τρέχοντος εγγράφου από το ιστορικό εγγράφων, σημαίνει ότι δεν είναι δυνατή η χρήση το κουμπί "πίσω" για να επιστρέψετε στο αρχικό έγγραφο. Χρησιμοποιήστε λοιπόν τη μέθοδο assign () εάν θέλετε να φορτώσετε ένα νέο έγγραφο και θέλετε να δώσετε την επιλογή να πλοηγηθείτε πίσω στο αρχικό έγγραφο.
Μπορείτε να αλλάξετε την ιδιότητα href αντικειμένου τοποθεσίας χρησιμοποιώντας το jQuery επίσης έτσι
$ (τοποθεσία) .attr ('href', url);
Και ως εκ τούτου μπορείτε να ανακατευθύνετε τον χρήστη σε κάποια άλλη διεύθυνση URL.
|
Βασικά το jQuery είναι απλώς ένα πλαίσιο JavaScript και για να κάνετε μερικά από τα πράγματα όπως η ανακατεύθυνση σε αυτήν την περίπτωση, μπορείτε απλά να χρησιμοποιήσετε καθαρή JavaScript, οπότε σε αυτήν την περίπτωση έχετε 3 επιλογές χρησιμοποιώντας βανίλιαJavaScript:
1) Χρησιμοποιώντας αντικατάσταση τοποθεσίας, αυτό θα αντικαταστήσει το τρέχον ιστορικό της σελίδας, σημαίνει ότι δεν είναι δυνατό να χρησιμοποιήσετε το κουμπί επιστροφής για να επιστρέψετε στην αρχική σελίδα.
window.location.replace ("http://stackoverflow.com");
2) Χρησιμοποιώντας εκχώρηση τοποθεσίας, αυτό θα διατηρήσει το ιστορικό για εσάς και με τη χρήση του κουμπιού επιστροφής, μπορείτε να επιστρέψετε στην αρχική σελίδα:
window.location.assign ("http://stackoverflow.com");
3) Συνιστώ να χρησιμοποιήσετε έναν από αυτούς τους προηγούμενους τρόπους, αλλά αυτή θα μπορούσε να είναι η τρίτη επιλογή χρησιμοποιώντας καθαρή JavaScript:
window.location.href = "http://stackoverflow.com";
Μπορείτε επίσης να γράψετε μια συνάρτηση στο jQuery για να την χειριστείτε, αλλά δεν συνιστάται, καθώς είναι μόνο μια γραμμή καθαρής λειτουργίας JavaScript, επίσης μπορείτε να χρησιμοποιήσετε όλες τις παραπάνω λειτουργίες χωρίς παράθυρο, εάν βρίσκεστε ήδη στο πεδίο του παραθύρου, για παράδειγμα window.location.replace ("http://stackoverflow.com"); θα μπορούσε να είναι location.replace ("http://stackoverflow.com");
Επίσης, τα δείχνω όλα στην παρακάτω εικόνα:
|
Θα πρέπει απλώς να μπορείτε να ρυθμίσετε χρησιμοποιώντας το window.location.
Παράδειγμα:
window.location = "https://stackoverflow.com/";
Εδώ είναι μια προηγούμενη ανάρτηση για το θέμα: Πώς μπορώ να ανακατευθύνω σε άλλη ιστοσελίδα;
|
Πριν ξεκινήσω, το jQuery είναι μια βιβλιοθήκη JavaScript που χρησιμοποιείται για χειρισμό DOM. Επομένως, δεν πρέπει να χρησιμοποιείτε το jQuery για ανακατεύθυνση σελίδας.
Ένα απόσπασμα από το Jquery.com:
Ενώ το jQuery ενδέχεται να εκτελείται χωρίς σημαντικά προβλήματα σε παλαιότερες εκδόσεις προγράμματος περιήγησης
δεν δοκιμάζουμε ενεργά το jQuery σε αυτά και γενικά δεν διορθώνουμε σφάλματα
που μπορεί να εμφανίζονται σε αυτά.
Βρέθηκε εδώ:
https://jquery.com/browser-support/
Επομένως, το jQuery δεν είναι μια τελική λύση για συμβατότητα προς τα πίσω.
Η ακόλουθη λύση με χρήση ακατέργαστου JavaScript λειτουργεί σε όλα τα προγράμματα περιήγησης και είναι στάνταρ για μεγάλο χρονικό διάστημα, οπότε δεν χρειάζεστε βιβλιοθήκες για υποστήριξη μεταξύ προγραμμάτων περιήγησης.
Αυτή η σελίδα θα ανακατευθύνει στο Google μετά από 3000 χιλιοστά του δευτερολέπτου
<κεφάλι>
παράδειγμα
<άτομο>
Θα ανακατευθυνθείτε σύντομα στο google.